/* stylelint-disable no-descending-specificity */

/**
 * Ratings form
 * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#ratingsform
 */

// When a page has been starred, this allows you to clear your rating
.star-messaging {
  color: @mid-grey;
  background: none;
  display: block;
  border: 0;
  cursor: pointer;
  margin: 0 auto;
}

.stars {
  background: url(/static/images/stars.png) repeat-x 0 0;
  width: 150px;
  cursor: pointer;
  margin: 0 auto 10px;
  input[type="submit"] {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  // stylelint-disable selector-max-specificity
  .star-5.star-selected ~ span {
    width: 100%;
  }
  .star-4.star-selected ~ span {
    width: 80%;
  }
  .star-3.star-selected ~ span {
    width: 60%;
  }
  .star-2.star-selected ~ span {
    width: 40%;
  }
  .star-1.star-selected ~ span {
    width: 20%;
  }
  .star-0.star-selected ~ span {
    width: 0%;
  }
  // stylelint-enable selector-max-specificity
  label {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    text-indent: -999em;
    float: left;
    position: relative;
    z-index: @z-index-level-3;
    background: transparent;
    cursor: pointer;

    &:hover ~ span {
      background-position: 0 -60px;
    }

    // stylelint-disable selector-max-specificity
    &.star-5:hover ~ span {
      width: 100%;
    }
    &.star-4:hover ~ span {
      width: 80%;
    }
    &.star-3:hover ~ span {
      width: 60%;
    }
    &.star-2:hover ~ span {
      width: 40%;
    }
    &.star-1:hover ~ span {
      width: 20%;
    }
    // stylelint-enable selector-max-specificity
  }
  span {
    display: block;
    width: 0;
    position: relative;
    top: 0;
    left: 0;
    height: 30px;
    background: url(/static/images/stars.png) repeat-x 0 -60px;
  }
}
